<script setup lang="tsx">
import { onMounted, reactive, ref } from 'vue';
import dayjs from 'dayjs';
import { fetchAssetsList, fetchBalanceApi } from '@/service/api/assets';
import { useAuthStore } from '@/store/modules/auth';
const authStore = useAuthStore();

// 数据列表
const getTableList = () => {
  table.loading = true;
  const params = {
    account: authStore.userInfo.phone
  };
  fetchAssetsList(params).then(({ data }) => {
    table.data = data || [];
    table.loading = false;
  });
};

// 时长余额
const duration = ref<any>('0分0秒');
const getBalance = async () => {
  const params = {
    account: authStore.userInfo.phone
  };
  const { data } = await fetchBalanceApi(params);
  if (data && data.balance) {
    const balance = Number(data.balance);
    // 分钟/秒的转换
    duration.value = `${balance}秒`;
  }
};

onMounted(() => {
  getBalance();
  getTableList();
});

const wechat = '938274872';

const table = reactive<any>({
  loading: false,
  data: [],
  columns: [
    {
      key: 'orderNo',
      title: '订单编号',
      align: 'center'
    },
    {
      key: 'account',
      title: '账户',
      align: 'center'
    },
    {
      key: 'orderType',
      title: '订单类型',
      align: 'center',
      render(row: any) {
        if (!row.orderType) return '--';
        const orderTypeMap: any = {
          10: '平台赠送',
          20: '充值',
          30: '消耗',
          40: '平台扣除'
        };
        return orderTypeMap[row.orderType];
      }
    },
    {
      key: 'content',
      title: '内容',
      align: 'center'
    },
    {
      key: 'createTime',
      title: '下单时间',
      align: 'center',
      render(row: any) {
        return dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss');
      }
    }
  ],
  pagination: {}
});
</script>

<template>
  <div>
    <header class="page-title">资产管理</header>
    <div class="mb-6 h-24 flex-y-center justify-between rounded-2 bg-content_bg px-4 text-4">
      <div class="flex-y-center">
        <SvgIcon class="text-7.5" icon="ant-design:field-time-outlined"></SvgIcon>
        <span class="ml-3 text-5">视频余额</span>
        <NDivider vertical class="!mx-4" />
        <span class="text-light_text">剩余合成时长: {{ duration }}</span>
      </div>
      <div class="flex-y-center">
        <SvgIcon class="text-7 text-#0CBE3F" icon="ic:twotone-wechat"></SvgIcon>
        <span class="ml-2 text-light_text">客服充值微信号: {{ wechat }}</span>
      </div>
    </div>
    <main>
      <NDataTable
        size="large"
        :columns="table.columns"
        :data="table.data"
        :loading="table.loading"
        :scroll-x="1088"
        max-height="calc(100vh - 408px)"
        :pagination="table.pagination"
        remote
        class="h-full"
      >
        <template #empty>
          <div class="my-63px flex-center flex-col">
            <img class="mb-4" src="@/assets/svg-icon/empty.svg" alt="" />
            <p class="text-4 text-light_text">您还没有使用记录</p>
          </div>
        </template>
      </NDataTable>
    </main>
  </div>
</template>

<style scoped lang="scss">
:deep(.n-data-table) {
  .n-data-table-th {
    height: 52px;
    font-size: 16px;
  }
  .n-data-table-tr {
    height: 52px;
  }
}
</style>
